<template>
  <div>
    <el-container>
      <el-header>
        <div class="left"></div>
        <el-menu default-active="0" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" @click="navigateTo('/home')">
            商店主页
          </el-menu-item>
          <el-menu-item index="2" @click="navigateTo('/cart')">
            购物车
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside>
          <!-- 左边图片区域 -->
          <div class="image-section">
            <img :src="productDetails.data.image" alt="Product Image" />
          </div>
        </el-aside>
        <!-- 右边商品详情 -->
        <el-main>
          <div class="info-section">
            <h1 class="product-title">{{ productDetails.data.name }}</h1>
            <p class="product-description">
              {{ productDetails.data.description }}
            </p>
            <p class="normalfirst">发货地区 : 广东 广州</p>
            <p class="normal">库存 : {{ productDetails.data.stock }}</p>
            <p class="normal">保障 : 七天无理由退货 极速退款</p>
            <p class="product-price">{{ productDetails.data.price }}元</p>
            <div>
              <p class="type-box">商品版本 :</p>
              <p class="type-effect">
                {{ productDetails.data.type }}
              </p>
            </div>
            <button class="add-to-cart-button" @click="addToCart">
              加入购物车
            </button>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  data() {
    return {
      productDetails: {},
    }
  },
  mounted() {
    this.getProductDetails()
  },
  methods: {
    // 加入购物车
    async addToCart() {
      try {
        const token = localStorage.getItem('jwtToken') // 获取存储的 token
        const response = await this.$http.post(
          '/api/cart/add',
          {
            productId: this.productDetails.data.id,
            price: this.productDetails.data.price,
            status: 0,
          },
          {
            headers: { Authorization: `Bearer ${token}` },
          }
        )
        if (response.status === 200) {
          alert('商品已加入购物车！')
        }
      } catch (error) {
        console.error('添加购物车失败', error)
      }
    },
    //导航栏跳转
    navigateTo(path) {
      this.$router.push(path)
    },
    //获取商品详情
    getProductDetails() {
      const token = localStorage.getItem('jwtToken') // 获取存储的 token
      const productId = this.$route.params.id //获取当前路由中动态路由的参数
      console.log('Authorization Header:', `Bearer ${token}`)
      this.$http
        .get('/api/home/' + productId, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        })
        .then((res) => {
          this.productDetails = res.data
          console.log(this.productDetails.data)
          this.addBrowseRecord()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //添加用户浏览记录
    addBrowseRecord() {
      console.log('添加浏览记录:{}', this.productDetails.data)
      const token = localStorage.getItem('jwtToken') // 获取存储的 token
      this.$http
        .post(
          '/api/home/addlog',
          {
            id: this.productDetails.data.id,
            name: this.productDetails.data.name,
            image: this.productDetails.data.image,
          },
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        )
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style scoped>
.product-image {
  max-width: 100%; /* 图片最大宽度不超过容器 */
  height: auto; /* 高度自动调整，保持比例 */

  border-radius: 8px; /* 如果需要圆角，可以设置 */
}
.image-section {
  display: flex;
  height: auto;
  width: 560px;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-radius: 8px; /* 圆角效果 */
  padding: 10px; /* 内边距，给容器周围留出空间 */
  margin-bottom: 20px; /* 底部外边距 */
}
.image-section img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.el-menu-demo {
  margin-left: -80px; /* 调整这个值，控制向左移动的距离 */
}
.el-header {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid #96aabf; /* 这里的 2px 是边框的粗细，#000 是颜色 */
}
.left {
  width: 30px;
}
.el-aside {
  flex: 1; /* 占用 50% 的宽度 */
  display: flex;
  background-color: #ffffff;
  color: #e9eef3;
  text-align: center;
  line-height: 200px;
}

.el-main {
  flex: 1;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 40px;
}
/* 商品详情 */

.info-section {
  margin-left: 20px;
  text-align: left; /* 文本和按钮靠左对齐 */
}
.product-title {
  margin: 0;
  padding: 0;
  font-size: 36px;
  font-weight: 400;
  color: #212121;
}
.product-description {
  color: #b0b0b0;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  line-height: 1.5;
}
.normalfirst {
  margin-top: 40px; /* 第一个文字的顶栏高度 */
}
.normal {
  margin: 0;
}
.product-price {
  font-size: 20px;
  line-height: 1;
  color: #ff6700;
  padding: 12px 0 10px;
}
.type-box {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #3a3a3a;
}
.type-effect {
  font-size: 18px;
  line-height: 1;
  display: inline-block; /* 让 p 标签适应文字的宽度，避免边框撑开整行 */
  border: 1px solid #b0b0b0; /* 设置边框，1px 的黑色实线边框 */
  padding: 10px; /* 给文字加点内边距，避免文字紧贴边框 */
  color: #585858;
}

.add-to-cart-button {
  background: #ff6700;
  border: 2px solid #ff6700;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.add-to-cart-button:hover {
  background: #e55e00;
  border-color: #e55e00;
}
</style>